<template>
  <div class="wrap">
    <nav>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-menu-item index="4">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><User /></el-icon>
            <span>会员管理</span>
          </template>
          <el-menu-item index="1-1">会员列表</el-menu-item>
          <el-menu-item index="1-2">会员登记</el-menu-item>
          <el-menu-item index="1-3">会员管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </nav>
    <main>
      <header>
        <el-icon class="refresh"><RefreshRight /></el-icon>
        <el-link href="/login" icon="User">&nbsp;系统管理员</el-link>
      </header>
      <div class="content">
        欢迎登录华杉商场后台管理系统
      </div>
    </main>
  </div>
</template>

<script setup>
</script>
<style scoped>
.wrap{height: 100vh;background-color: #eef2f5;display: flex;}
nav{width: 160px;background-color: #545c64;}
main{flex: 1;}
header{height: 60px;background-color: #fff;display: flex;align-items: center;padding: 0 20px;}
header .refresh{margin-right: auto;cursor: pointer;}
header .refresh:hover{color: rgb(230, 162, 60);transform: scale(1.3);}
.content{background-color: #fff;margin: 20px;padding: 20px;}
</style>
